<template>

  <div style="padding-left: 10px">

    <div class="mallCreate">
      <el-form>

        <el-form-item label="商品编号:">
          <el-input v-model="itemCode"></el-input>
        </el-form-item>

        <el-form-item label="店铺名称:">
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.sellerName"
                       :value="item.sellerId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="类目选择:">
          <el-select v-model="cateId" placeholder="请选择">
            <el-option v-for="item in cateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
          <el-select v-model="childCateId" placeholder="请选择">
            <el-option v-for="item in childCateList" :key="item.cid" :label="item.cateName"
                       :value="item.cid"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品标题:">
          <el-input v-model="title"></el-input>
        </el-form-item>

        <el-form-item>
          商品价格: &nbsp;&nbsp;<el-input style="width: 100px" v-model="discount"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;市场均价:
          <el-input style="width: 100px" v-model="price"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;初始销量:
          <el-input style="width: 100px" v-model="fakeSales"></el-input>
          <!--<label>佣金:</label>-->
          <!--<el-input style="width: 100px" v-model="reward"></el-input>-->
        </el-form-item>

        <el-form-item label="重量:">
          <el-input style="padding-left: 30px" v-model="weight"></el-input> (若邮费计算方式不按称重计算可不填商品重量)
        </el-form-item>

        <el-form-item label="运费:">
          <el-select v-model="post" placeholder="请选择" style="padding-left: 30px">
            <el-option v-for="item in postData" :key="item.feeId" :label="item.name" :value="item.feeId"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="商品顶部展示图:"><span>（五张图，图片尺寸750*750px以上，宽度1：1正方形）</span>
          <br>
          <div v-for="(item,index) in images" class="createImg" @click="choseIndex = index">
            <template>
              <lazy-img-upload @onSuccess="imageImg"
                               beforeClass="afterUpload"
                               afterClass="afterUpload"
                               quality="50"
                               resize-width="750"
                               :background-img="item.backImg">
              </lazy-img-upload>
              <el-button style="float: left;margin: 20px 20px 0 5px" @click="removeImage(index)">删除</el-button>
            </template>
          </div>
          <div style="clear: both"></div>
          <el-button @click="addImage()" style="margin:30px 0 10px 10px" type="primary">添加图片</el-button>
        </el-form-item>
      </el-form>

      <div>

        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品参数:</div>
          <br>
          <br>
          <div style="width: 600px">
            <div v-for="(item,index) in params" style="margin: 0 0 10px 0">
              <template>
                <el-input style="width: 100px" v-model="item.name"></el-input>
                <el-input style="width: 300px" v-model="item.value"></el-input>
                <el-button @click="removeParams(index)">删除</el-button>
              </template>
            </div>
            <br>
          </div>
          <el-button @click="addModel()" style="margin:0 0 10px 10px">自定义参数</el-button>
        </div>
        <div style="background: #f9f9f9;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 0 10px">商品SKU:</div>
          <br>
          <br>
          <div style="width: 600px;margin: 0 0 10px 0" v-for="(item,index) in skus">
            <template>
              <el-input style="width: 100px" v-model="item.name"></el-input>
              <el-input style="width: 300px" v-model="item.value"></el-input>
              <el-button @click="removeSku(index)">删除</el-button>
            </template>
          </div>
          <br>
          <el-button @click="addSku()" style="margin:0 0 10px 10px">添加属性</el-button>
        </div>
        <div style="background: #f9f9f9;width: 100%;margin-bottom: 20px">
          <div style="float: left;padding: 10px 12px 20px 10px">（建议切图，每张图片尺寸宽度为750px，高度不超过2000px）</div>
          <div style="clear: both"></div>
          <div v-for="(item,index) in details" class="createImg" @click="imgIndex = index">
            <template>
              <lazy-img-upload @onSuccess="detailsImg"
                               beforeClass="afterUpload"
                               afterClass="afterUpload"
                               quality="50"
                               resize-width="1000"
                               :background-img="item.backImg">
              </lazy-img-upload>
              <el-button style="float: left;margin: 20px 20px 0 5px" @click="removeDetail(index)">删除</el-button>
            </template>
          </div>
          <div style="clear: both"></div>
          <el-button @click="addDetail()" style="margin:30px 0 10px 10px">添加图片</el-button>
        </div>
      </div>

      <el-button type="primary" style="margin: 50px 0 0 0" @click="goSendGoods">发布商品</el-button>
    </div>

  </div>

</template>

<script>
  import LazyImgUpload from "../../components/LazyImgUpload"
  import {ajax, sellers, addItem, postFeeModel, selMainCate} from "../../data/service";

  export default {
    name: "mallCreate",
    data() {
      return {
        options: [],
        cateList: [],
        childCateList: [],
        postData:[],
        value: '',
        cateId: '',
        childCateId: '',
        post: '',
        params: [],
        skus: [],
        details:[],
        showDetails:[],
        itemCode: '',
        title: '',
        discount: '',
        price: '',
        fakeSales: '',
        reward:'',
        weight: '',
        images:[],//展示图
        imgNum:0,//图片数量 最多9张
        backImg:require('../../assets/scImg1.png'),//背景图
        skuJson:'',
        paramsJson:'',
        feeId:'',
        imgIndex:'',
        choseIndex:''
      }
    },
    mixins: [ajax],
    created() {
      this.getShops();
      this.getMainCates();
      this.getPostFeeModel();
    },

    watch: {
      cateId(){
        this.childCateList = [];
        this.cateList.forEach(item => {
          if(item.cid === this.cateId){
            this.childCateList = item.children
          }
        })
      }
    },
    methods: {
      getShops() {
        this.doajax(sellers, {}, (resp) => {
          this.options = resp.data;
        })
      },

      getMainCates(){
        // this.cateList = [
        //   {
        //     cid:1, 
        //     cateName:'男装', 
        //     children:[
        //       {cid:1, cateName:'T恤'},
        //       {cid:2, cateName:'衬衫'}
        //     ]
        //   },
        //   {
        //     cid:2, 
        //     cateName:'女装', 
        //     children:[
        //       {cid:1, cateName:'裙子'},
        //       {cid:2, cateName:'衬衫'}
        //     ]
        //   }
        // ]
        // return;
        this.doajax(selMainCate, {}, resp => {
          this.cateList = resp.data
        })
      },
      getPostFeeModel(){
        this.doajax(postFeeModel,{},(resp)=>{
          this.postData=resp.data;
        })
      },
      goSendGoods() {
        if(this.itemCode===''){this.error("请输入商品编号");return}
        if(this.value===''){this.error("请选择店铺");return}
        if(this.title===''){this.error("请输入商品标题");return}
        if(this.discount===''){this.error("请输入商品特价");return}
        if(this.price===''){this.error("请输入商品原价");return}
        if(this.fakeSales===''){this.error("请输入商品初始销量");return}
        if(this.post===''){this.error("请运费模板");return}
        if(!this.images.length >0){
           this.error("请至少添加一张主图");
           return;
        }

        let img = [];
        for(let i =0;i<this.images.length;i++){
          if(this.images[i].imgUrl){
            img.push(this.images[i].imgUrl);
          }
        }
        //添加了图片没有上传
        if(img.length===0){
          this.error("请至少添加一张主图");
          return;
        }
        if(this.childCateId === ''){
          this.error("请选择商品类目");
          return;
        }


        this.skuJson=( JSON.stringify(this.skus) );
        this.paramsJson=( JSON.stringify(this.params) );
        let str = [];
        //detail 可以为空不比判断长度
        if(this.details.length>0){
          for(let i =0;i<this.details.length;i++){
            if(this.details[i].imgUrl){
              str.push(this.details[i].imgUrl);
            }
          }
        }

        this.doajax(addItem, {
          itemCode: this.itemCode,
          sellerId: this.value,
          cid: this.childCateId,
          title: this.title,
          discount: this.discount,
          price: this.price,
          reward:this.reward,
          fakeSales: this.fakeSales,
          images:img.join(","),
          weight: this.weight,
          skus:this.skuJson,
          params:this.paramsJson,
          feeId:this.post,
          details:str.join(","),
          showImgRule:'_750x750.jpg'
        }, (resp) => {
            this.$router.push('/admin/mallList');

        })
      },
      detailsImg(url){
        this.details[this.imgIndex].imgUrl = url;
        this.details[this.imgIndex].backImg = url;
      },
      addModel() {
        let modelParam = {name:'',value:''};
        this.params.push(modelParam);
      },
      removeParams(index) {
        this.params.splice(index, 1);
      },
      addSku() {
        let modelParam = {name:'',value:''};
        this.skus.push(modelParam);
      },
      removeSku(index) {
        this.skus.splice(index, 1);
      },
      addDetail() {
        let modelParam = {};
        modelParam.backImg = this.backImg;
        this.details.push(modelParam);
      },
      removeDetail(index){
         this.details.splice(index,1);
      },
      addImage(){
        if(this.imgNum>=9){
          this.error("展示图最多9张");
          return
        }
        let modelParam = {};
        modelParam.backImg = this.backImg;
        this.images.push(modelParam);
        this.imgNum++;
      },
      removeImage(index){
        this.images.splice(index,1);
        this.imgNum--;
      },
      imageImg(url){
        this.images[this.choseIndex].imgUrl = url;
        this.images[this.choseIndex].backImg = url;
      },
    },
    components: {
      LazyImgUpload
    }
  }
</script>

<style>
  .mallCreate .el-input {
    width: 500px;
  }

  .afterUpload {
    float: left;
    padding-right: 20px;
  }

  .afterUpload > img {
    width: 80px!important;
    height: 80px!important;
  }

  .createImg > .afterUpload {
    padding-right: 0;
  }

  .createImgX {
    width: 30px;
    float: left;
  }
</style>
